$(function () {

    // 初始自定义弹出的滚动条 超出滚动
    $('.modal-body').mCustomScrollbar({
        theme: "dark",
        autoHideScrollbar: true //自动隐藏滚动条
    })

    // loaded.bs.modal	从远端的数据源加载完数据之后触发该事件。
    $('#myLogin').on('  ', function (e) {
        // do something...

        console.log(1)
    })
    // show 方法调用之后立即触发该事件。
    $('#warningRecord').on('show.bs.modal', function (e) {
        // do something...
        console.log(1)
    })

    // shown.bs.modal	此事件在模态框已经显示出来（并且同时在 CSS 过渡效果完成）之后被触发。
    $('#detailRecord').on('shown.bs.modal', function (e) {
        // do something...
        console.log(1)
        showMakerLine()

    })
    // 手动打开模态框。在模态框显示之前返回到主调函数中 （也就是，在触发 shown.bs.modal 事件之前）
    // $('#myModal').modal('show')
    // 手动隐藏模态框。在模态框隐藏之前返回到主调函数中 （也就是，在触发 hidden.bs.modal 事件之前）。
    // $('#myModal').modal('hide')

    // 企业类型分布
    showBar()
    // 企业规模分布
    showBar2()
    // 各单位执法情况
    showBarLine()

})

// 企业类型分布
function showBar() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("main"));
    // 指定图表的配置项和数据
    var data = [{
        value: 13, //百分柱子条
        valdata: 899, //实际数量
        name: '涉及重大危险'
    }, {
        value: 13,
        valdata: 899,
        name: '重大危险源企'
    }, {
        value: 13,
        valdata: 899,
        name: '有重点监管危'
    }, {
        value: 13,
        valdata: 899,
        name: '有限空间'
    }, {
        value: 13,
        valdata: 899,
        name: '涉及可燃爆危'
    }, {
        value: 13,
        valdata: 899,
        name: '喷涂作业'
    }, {
        value: 13,
        valdata: 899,
        name: '船舶修造企业'
    }, {
        value: 0,
        valdata: 0,
        name: '涉氨制冷企业'
    }, {
        value: 13,
        valdata: 899,
        name: '金属冶炼企业'
    }, {
        value: 13,
        valdata: 899,
        name: '涉及可燃爆危涉及可燃爆危'
    }]; //百分多少
    // var titlename = ['涉及重大危险', '重大危险源企', '有重点监管危', '有限空间', '涉及可燃爆危', '喷涂作业', '船舶修造企业', '涉氨制冷企业', '金属冶炼企业',
    //     '涉及可燃爆危'
    // ];
    // var valdata = [702, 406, 664, 793, 505, 702, 406, 664, 793, 505]; //实际数量
    var myColor = ['#0091FF', '#0091FF', '#0091FF', '#0091FF', '#0091FF'];
    var option = {
        title: {
            text: '企业类型分布',
            textStyle: {
                color: '#FFF'
            },
            left: '0%',
            top: '0%'
        },
        tooltip: {
            show: true,
            formatter: function (value, index) {
                if (!value.seriesIndex) {
                    return value.name.concat('：<br/>').concat(value.data.valdata)
                } else {
                    return ''
                }
            }
        },
        //图标位置
        grid: {
            top: '33',
            left: '30%',
            right: 10,
            bottom: 10,
        },
        xAxis: {
            show: false
        },
        yAxis: [{
            show: true,

            data: data.map(item => item.name),
            inverse: true,
            axisLine: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                textStyle: {
                    color: '#65CDFF',
                    fontSize: 14
                },
                formatter: (value) => {
                    return value.length > 7 ? value.substring(0, 6).concat('...') : value
                },

            },


        }, {
            show: true,
            inverse: true,
            data: data.map(item => item.valdata),
            axisLabel: {
                show: false,
                textStyle: {
                    fontSize: 12,
                    color: '#fff',
                },
            },
            axisLine: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },

        }],
        series: [{
            name: '条',
            type: 'bar',
            yAxisIndex: 0,
            data: data,
            barMinHeight: 15,
            barWidth: 12,
            itemStyle: {
                normal: {
                    barBorderRadius: 20,
                    color: function (params) {
                        var num = myColor.length;
                        return myColor[params.dataIndex % num]
                    },
                }
            },
            label: {
                normal: {
                    show: true,
                    position: 'right',
                    textStyle: {
                        color: '#fff'
                    },
                    formatter: function (v, i) {
                        return v.data.valdata
                        // console.log(v, i)
                    }
                    // formatter: '{c}%'
                }
            },
        }, {
            name: '框',
            type: 'bar',
            yAxisIndex: 1,
            barGap: '-100%',
            data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
            barWidth: 16,
            itemStyle: {
                normal: {
                    color: 'none',
                    borderColor: 'rgba(0,145,255,.4)',
                    borderWidth: 2,
                    barBorderRadius: 15,
                }
            }
        }, ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}

function showBar2() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("main2"));
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '企业规模分布',
            textStyle: {
                color: '#FFF'
            },
            left: '0%',
            top: '0%'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ',
            textStyle: {
                fontSize: 14
            }
        },
        grid: {
            top: 50,
            left: '3%',
            right: '4%',
            bottom: '20',
            containLabel: true
        },
        yAxis: {
            show: true,
            axisLabel: {
                interval: 0,
                textStyle: {
                    color: '#C2EAFF',
                    fontSize: 14
                },

            },

            axisLine: {
                show: true,
                lineStyle: {
                    color: '#07274D'
                }
            },
            axisTick: {
                lineStyle: {
                    color: '#1178C9'
                }
            },
            splitLine: {
                lineStyle: {
                    color: '#07274D'
                }
            },

        },
        xAxis: {
            type: 'category',

            axisLabel: {
                interval: 0,
                show: true,
                textStyle: {
                    color: '#C2EAFF',
                    fontSize: 14
                }
            },
            axisLabel: {
                interval: 0,
                textStyle: {
                    color: '#C2EAFF',
                    fontSize: 14
                },

            },

            axisLine: {
                show: true,
                lineStyle: {
                    color: '#07274D'
                }
            },
            axisTick: {
                lineStyle: {
                    color: '#1178C9'
                }
            },
            splitLine: {
                lineStyle: {
                    color: '#07274D'
                }
            },
            data: [
                '微型',
                '小型',
                '中型',
                '大型',

            ]
        },

        series: [{
                name: '药械企业类型情况',
                type: 'bar',
                barWidth: 30,
                itemStyle: {
                    normal: {
                        color: function (value) {
                            var coloeList = [
                                '#21D376',
                                '#0091FF',
                                '#FF9800',
                                '#E32323',
                                '#21FB30',
                                '#EB3432',
                                '#FF8516',
                                '#F2E52C',
                                '#FF003F',
                                '#97683F',
                                '#00BF5F'
                            ]
                            return coloeList[value.dataIndex]

                        },
                        textStyle: {
                            fontSize: 14,
                            color: '#C2EAFF'
                        },
                        label: {
                            show: true,
                            position: 'top',
                            fontSize: 14,
                            textStyle: {
                                color: '#fff',
                                fontSize: 14,

                            }
                        }
                    }
                },
                data: [
                    13,
                    23,
                    29,
                    10,



                ]
            }

        ]
    }

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}

function showBarLine(arrayDa) {
    var myChart = echarts.init(document.getElementById('main3'))
    var option = {
        title: {
            text: '各单位执法情况',
            textStyle: {
                color: '#FFF'
            },
            left: '0%',
            top: '10'
        },
        backgroundColor: 'rgba(6,17,47,.8)',
        tooltip: {
            axisPointer: {
                type: 'shadow'
            },
            trigger: 'axis',
            textStyle: {
                fontSize: 18
            }
        },
        legend: {
            data: ['计划检查企业数', '已检查企业数', '完成率'],
            textStyle: {
                color: "#fff",
                fontSize: 18
            },
            top: 20
        },
        grid: {
            top: 60,
            left: 30,
            right: 30,
            bottom: 40,
            containLabel: true
        },
        xAxis: {
            type: 'category',

            // boundaryGap: false,

            axisLine: {
                onZero: false,
                show: true,

                lineStyle: {
                    color: '#1178C9'
                }
            },
            axisLabel: {
                interval: 0,

                textStyle: {
                    color: '#97B8C9',
                    fontSize: 18

                },
                formatter: function (params) {
                    var string = params
                    return /\S{3}/.test(string) ?
                        string.replace(/\s/g, '').replace(/(.{4})/g, "$1 \n") :
                        string

                }

            },

            axisLine: {
                show: true,
                lineStyle: {
                    color: '#07274D'
                }
            },
            axisTick: {
                lineStyle: {
                    color: '#1178C9'
                }
            },
            splitLine: {
                lineStyle: {
                    color: '#07274D'
                }
            },
            data: [
                '河南省',
                '河南省',
                '河南省',
                '河南省',
                '河南省',
                '河南省',
                '河南省',
                '河南省',
                '河南省',
                '河南省',
                '河南省',
                '河南省'

            ]
        },
        dataZoom: [{
            type: 'slider',
            start: 0,
            end: 80,
            textStyle: {
                color: '#C2EAFF'
            },
            bottom: 0,
            top: 236,
            fillerColor: 'rgba(15,120,201,.45)',
            backgroundColor: 'rgba(0,145,255,.1)',
            dataBackground: {
                lineStyle: {
                    color: '#A0D1F4'
                },
                areaStyle: {
                    color: 'rgba(15,120,201,.45)'
                }
            },
            borderColor: '#A0D1F4',
            handleStyle: {
                color: '#0F78C9',
                borderColor: '#0F78C9'
            }
        }],
        yAxis: [

            {
                type: 'value',
                interval: 0,
                splitLine: {
                    lineStyle: {
                        color: '#07274D'
                    }
                },
                axisLine: {
                    onZero: false,

                    lineStyle: {
                        color: '#07274D'
                    }
                },
                axisTick: {
                    lineStyle: {
                        color: '#1178C9'
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#97B8C9',
                        fontSize: 18

                    },
                    formatter: '{value} '
                }
            },
            {
                type: 'value',
                name: '',
                min: 0,
                max: 100,
                splitNumber: 5,
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#07274D'
                    }
                },
                axisLine: {
                    onZero: false,

                    lineStyle: {
                        color: '#07274D'
                    }
                },
                axisTick: {
                    lineStyle: {
                        color: '#1178C9'
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#97B8C9',
                        fontSize: 16

                    },
                    formatter: '{value}%'
                }
            }
        ],

        series: [{
            name: '计划检查企业数',
            type: 'bar',
            barWidth: 16,
            barBorderRadius: 5,
            itemStyle: {
                normal: {
                    color: '#0D80FE'

                }
            },
            data: [
                2,
                1,
                3,
                0,
                0,
                1,
                2,
                1,
                13,
                3,
                1,
                1
            ]

        }, {
            name: '已检查企业数',
            type: 'bar',
            barWidth: 16,
            barBorderRadius: 5,
            itemStyle: {
                normal: {
                    color: '#21D376'

                }
            },
            data: [
                2,
                1,
                3,
                0,
                0,
                1,
                2,
                1,
                13,
                3,
                1,
                1
            ]

        }, {
            name: '完成率',
            type: 'line',
            yAxisIndex: 1,
            itemStyle: {
                normal: {
                    color: '#FF9800'

                }
            },
            data: [
                2,
                1,
                3,
                0,
                0,
                1,
                2,
                1,
                13,
                3,
                1,
                1
            ]

        }]
    }

    myChart.setOption(option)

}

function showMakerLine() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("main-line"));
    // 指定图表的配置项和数据
    var option = {

        tooltip: {
            trigger: 'axis'
        },
        grid: {
            top: 30,
            left: 30,
            right: 40,
            bottom: 40,
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
                interval: 0,
                show: true,
                textStyle: {
                    color: '#C2EAFF',
                    fontSize: 14
                }
            },
            axisLabel: {
                interval: 0,
                textStyle: {
                    color: '#C2EAFF',
                    fontSize: 14
                },

            },

            axisLine: {
                show: true,
                lineStyle: {
                    color: '#07274D'
                }
            },
            axisTick: {
                lineStyle: {
                    color: '#1178C9'
                }
            },
            splitLine: {
                lineStyle: {
                    color: '#07274D'
                }
            },

            data: ['16:42:32', '16:42:33', '16:42:34', '16:42:35', '16:42:36', '16:42:37', '16:42:38',
                '16:42:39', '16:42:40', '16:42:41'
            ]
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value} °C'
            },
            axisLabel: {
                interval: 0,
                show: true,
                textStyle: {
                    color: '#C2EAFF',
                    fontSize: 14
                }
            },
            axisLabel: {
                interval: 0,
                textStyle: {
                    color: '#C2EAFF',
                    fontSize: 14
                },

            },

            axisLine: {
                show: true,
                lineStyle: {
                    color: '#07274D'
                }
            },
            axisTick: {
                lineStyle: {
                    color: '#1178C9'
                }
            },
            splitLine: {
                lineStyle: {
                    color: '#07274D'
                }
            },

            max: 100
        },
        dataZoom: [{
            type: 'slider',
            start: 0,
            end: 80,
            textStyle: {
                color: '#C2EAFF'
            },
            bottom: 0,
            top: 316,
            fillerColor: 'rgba(15,120,201,.45)',
            backgroundColor: 'rgba(0,145,255,.1)',
            dataBackground: {
                lineStyle: {
                    color: '#A0D1F4'
                },
                areaStyle: {
                    color: 'rgba(15,120,201,.45)'
                }
            },
            borderColor: '#A0D1F4',
            handleStyle: {
                color: '#0F78C9',
                borderColor: '#0F78C9'
            }
        }],
        color: ['#18CF73'],
        series: [{
            name: '报警时间内传感波动曲线',
            type: 'line',
            data: [12, 12, 11, 10, 12, 2, 4, 5, 3, 45],

            markLine: {
                name: 'aa',
                data: [
                    [{
                        coord: ['16:42:34', 0]
                    }, {
                        coord: ['16:42:34', 100]
                    }, {
                        label: {
                            normal: {
                                formatter: function (par) {
                                    return '报警开始时间'
                                }
                            }

                        },
                    }],
                    [{
                        coord: ['16:42:38', 0]
                    }, {
                        coord: ['16:42:38', 100]
                    }, {
                        label: {
                            normal: {
                                formatter: function (par) {
                                    return '报警结束时间'
                                }
                            }

                        },
                    }],
                    {
                        yAxis: 30,
                        label: {
                            normal: {
                                formatter: function (par) {
                                    return '上限1'
                                }
                            }
                        },
                        lineStyle: {
                            normal: {
                                color: "#F5A623"
                            }
                        }
                    },
                    {
                        yAxis: 50,
                        label: {
                            normal: {
                                formatter: function (par) {
                                    return '上限2'
                                }
                            }

                        },
                        lineStyle: {
                            normal: {
                                color: "#E32323"
                            }
                        }
                    }
                ]
            }
        }]

    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

}